setState

雖然 state 可被修改 但要搭配 react 內專屬的方法setState
不可以直接修改 state 上的值，直接修改 state 並不會造成 react component 重新被渲染

// 這樣寫是錯誤的
this.state.someState = 'new valueeee!';

而每次 setState 就會導致 component 重新被渲染(re-render)

setState 傳入的兩個 parameter

setStste 可傳入兩個 parameter，分別是

1. 要把 state 改變成什麼(object / function)
2. callback function(選擇性加入)

因為 setState 本身是異步 asynchronus 的關係(state的更新可能是非同步的)，
React 為了提高效能，具有將多個 setState 合併成單一更新的特性

所以不能保證當多個 setState 執行時，在哪個階段會被 set 完成
要達成緊接在 setState 後馬上執行的函式，就要使用第二個 parameter

以 object 作為 state 的 更新值

clickHandler() {
		this.setState({ greetingA: "Goodbye!" });
	}

以 function 作為 state 的 更新值

通常的使用時機是在
使用 old state 做為基礎，或是要抽離出更新 state 的邏輯以達成重複應用

// function as updater
	updateSt() {
		this.setState((oldState) => {
			const updatedArr = oldState.someArray.map((eachVal) => eachVal + 1);
			return { someArray: updatedArr };
		});
	}

example from riptutorial
incrementCounter 在 component 外部

// Outside of component class, potentially in another file/module

function incrementCounter(previousState, currentProps) {
    return {
        counter: previousState.counter + 1
    };
}

// Within component
this.setState(incrementCounter)

帶有 callback 的 setState

// object as updater + callback function
	clickHandler() {
		this.setState(
            { greetingA: "Goodbye!" }, 
            () => {
                this.setState({ greetingB: "Time to say goodbye" });
            }
        );
	}

stateful component / stateless component

• stateful component 為帶有 state 的 component，可以做存 state，修改 state 的容器，還沒有 react hook 的時候，class component 即是 stateful component
• 在還沒有 react hook 的時候， function component 通常就是 stateless component，用來製作結構簡單的 UI 元件，重新渲染 stateless component 時耗費的資源也較小